import React, {useEffect, useState} from 'react';
import {View, Text, TouchableOpacity, Image, ScrollView} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import Swiper from 'react-native-swiper';
/* 组件 */
import AreaView from '../../components/Layout/AreaView';
import SearchHeadIcon from '../../components/SearchHeadIcon';
import Banner from '../../components/Banner';
import {contentReviewList} from '../../service/user';
import BaseUrl from '../../config/BaseUrl';
/* 样式 */
import styles from './style';

const Reading = (props) => {
  const tabs = [
    {name: '专家阅片', id: 0},
    // {name: 'AI阅片', id: 1},
  ];
  const [currentId, setCurrentId] = useState(0);
  const [tabCenter, setTabCenter] = useState(false);
  const [list, setList] = useState([]);
  /* 自定义头部 */
  const navigation = useNavigation();

  useEffect(() => {
    navigation.setOptions({
      title: '阅片服务',
      // headerRight: () => <SearchHeadIcon navigation={navigation} />,
    });

    contentReviewList({type: 0, pn: 1, ps: 10}).then((res) => {
      console.log(res);
      setList(res.rows);
      if (res.total > 0) {
        setTabCenter(true);
      }
    });
  }, [navigation]);

  return (
    <AreaView>
      <View style={styles.wrapper_container}>
        <Banner />
      </View>
      <View style={styles.reading_tab}>
        {tabs?.map((item) => (
          <TouchableOpacity
            key={item.id}
            onPress={() => setCurrentId(item.id)}
            style={styles.tab_btn}>
            <Text
              style={[
                styles.btn_text,
                currentId === item.id && styles.btn_text_selected,
              ]}>
              {item.name}
            </Text>
            {currentId === item.id && <View style={styles.selected} />}
          </TouchableOpacity>
        ))}
      </View>
      <ScrollView style={{flex: 1}}>
        {tabCenter ? (
          // <Text style={[styles.f24]}>
          //   有句话说的好，颈椎不舒服，很多疾病都会随之找上门来，虽然这有一点夸大的成分，但是也从侧面说明了?
          // </Text>
          <View style={{flex: 1}}>
            {(list || []).map((item, i) => (
              <View style={styles.comment}>
                <View style={styles.comment_list}>
                  <View style={styles.head_container}>
                    <Image
                      style={styles.avatar}
                      source={{uri: BaseUrl.imgurl + item?.custImage}}
                    />
                    <View style={styles.name_time}>
                      <View style={styles.name_time_top}>
                        <Text style={styles.name_text}>{item?.nickName}</Text>
                      </View>
                      <View style={styles.time_bottom}>
                        <Text style={styles.time_b_text}>
                          {item?.createTime}
                        </Text>
                      </View>
                    </View>
                  </View>
                  <View style={styles.topic_content}>
                    <Text style={styles.content_text}>
                      阅片服务：{item?.reviewContent}
                    </Text>
                    <Image
                      style={styles.review_img}
                      source={{uri: BaseUrl.imgurl + item?.reviewImage}}
                    />
                  </View>
                  <View style={styles.children_commen}>
                    <View style={styles.children_head_container}>
                      <Image
                        style={styles.children_avatar}
                        source={{uri: BaseUrl.imgurl + item?.teacherImage}}
                      />
                      <View style={styles.children_name_time}>
                        <View style={styles.children_name_time_top}>
                          <Text style={styles.children_name_text}>
                            {item?.teacherName}
                          </Text>
                        </View>
                        <View style={styles.children_time_bottom}>
                          <Text style={styles.children_time_b_text}>
                            {item?.replyTime}
                          </Text>
                        </View>
                      </View>
                    </View>
                    <View style={styles.children_topic_content}>
                      <Text style={styles.children_content_text}>
                        {item?.replyContent}
                      </Text>
                      <Image
                        style={styles.review_img}
                        source={{uri: BaseUrl.imgurl + item?.signImage}}
                      />
                    </View>
                  </View>
                </View>
              </View>
            ))}
          </View>
        ) : (
          <Text style={[styles.f24, styles.c9, styles.center]}>
            您尚未发起阅片服务，请您发布要咨询的片源 需要提交.DCM格式文件
            需要提交.DCM格式文
          </Text>
        )}
      </ScrollView>
      <TouchableOpacity
        style={styles.reading_edit}
        onPress={() => navigation.push('ReadingProblem')}>
        <Image
          source={require('../../assets/images/reading-edit.png')}
          style={{width: '100%', height: '100%'}}
        />
      </TouchableOpacity>
    </AreaView>
  );
};

export default Reading;
